<template>
    <!-- #ifdef H5 -->
    <td
        class="uni-table-td"
        :rowspan="rowspan"
        :colspan="colspan"
        :class="{ 'table--border': border }"
        :style="{ width: width + 'px', 'text-align': align }"
    >
        <slot></slot>
    </td>
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <!-- :class="{'table--border':border}"  -->
    <view
        class="uni-table-td"
        :class="{ 'table--border': border }"
        :style="{ width: width + 'px', 'text-align': align }"
    >
        <slot></slot>
    </view>
    <!-- #endif -->
</template>

<script>
/**
 * Td 单元格
 * @description 表格中的标准单元格组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
 * @property {Number} 	align = [left|center|right]	单元格对齐方式
 */
export default {
    name: "UniTd",
    options: {
        // #ifdef MP-TOUTIAO
        virtualHost: false,
        // #endif
        // #ifndef MP-TOUTIAO
        virtualHost: true
        // #endif
    },
    props: {
        width: {
            type: [String, Number],
            default: ""
        },
        align: {
            type: String,
            default: "left"
        },
        rowspan: {
            type: [Number, String],
            default: 1
        },
        colspan: {
            type: [Number, String],
            default: 1
        }
    },
    data() {
        return {
            border: false
        };
    },
    created() {
        this.root = this.getTable();
        this.border = this.root.border;
    },
    methods: {
        /**
         * 获取父元素实例
         */
        getTable() {
            let parent = this.$parent;
            let parentName = parent.$options.name;
            while (parentName !== "uniTable") {
                parent = parent.$parent;
                if (!parent) return false;
                parentName = parent.$options.name;
            }
            return parent;
        }
    }
};
</script>

<style lang="scss">
$border-color: #ebeef5;

.uni-table-td {
    display: table-cell;
    padding: 8px 10px;
    font-size: 14px;
    border-bottom: 1px $border-color solid;
    font-weight: 400;
    color: #606266;
    line-height: 23px;
    box-sizing: border-box;
}

.table--border {
    border-right: 1px $border-color solid;
}
</style>
